<clr-modal [(clrModalOpen)]="showDelete" clrModalSize="l">
  <h3 class="modal-title">取消授权</h3>
  <div class="modal-body" #resource>
    <div class="clr-col-12" align="center" *ngIf="loading">
        <span class="spinner spinner-lg loading">
          Loading...
        </span>
    </div>
    <span>确定取消授权？</span>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="cancelDelete()" [disabled]="isSubmitGoing">取消</button>
    <button type="submit" class="btn btn-primary" (click)="deleteItemResource()">确认</button>
  </div>
</clr-modal>
<div class="row">
  <!--  <div class="col-lg-12" align="center">-->
  <!--    <h6 class="font-title">集群</h6>-->
  <!--  </div>-->
  <!--  <div class="clr-col-lg-12">-->
  <!--    <clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="clusterSelected">-->
  <!--      <clr-dg-action-bar>-->
  <!--        <div class="btn-group">-->
  <!--          <button type="button" class="btn btn-sm btn-secondary" (click)="createItemResource('CLUSTER')">-->
  <!--            <clr-icon shape="plus" size="16"></clr-icon>-->
  <!--            添加-->
  <!--          </button>-->
  <!--          <button type="button" class="btn btn-sm btn-secondary" [disabled]="clusterSelected.length == 0"-->
  <!--                  (click)="openDeleteModal(clusterSelected,'CLUSTER')">-->
  <!--            <clr-icon shape="close"></clr-icon>-->
  <!--            取消授权-->
  <!--          </button>-->
  <!--        </div>-->
  <!--      </clr-dg-action-bar>-->
  <!--      <clr-dg-column>名称</clr-dg-column>-->
  <!--      <clr-dg-column>离线包</clr-dg-column>-->
  <!--      <clr-dg-column>部署模式</clr-dg-column>-->
  <!--      <clr-dg-column>状态</clr-dg-column>-->
  <!--      <clr-dg-row *clrDgItems="let i of itemResources | itemResource  : 'CLUSTER' " [clrDgItem]="i">-->
  <!--        <clr-dg-cell>{{i.data.name}}</clr-dg-cell>-->
  <!--        <clr-dg-cell>{{i.data.package}}</clr-dg-cell>-->
  <!--        <clr-dg-cell>{{i.data.template}}</clr-dg-cell>-->
  <!--        <clr-dg-cell>{{i.data.status}}</clr-dg-cell>-->
  <!--      </clr-dg-row>-->
  <!--    </clr-datagrid>-->
  <!--  </div>-->
  <div class="col-lg-12" align="center">
    <h6 class="font-title">主机</h6>
  </div>
  <div class="clr-col-lg-12">
    <clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="hostSelected">
      <clr-dg-action-bar>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-secondary" (click)="createItemResource('HOST')" [disabled]="permission==='VIEWER'">
            <clr-icon shape="plus" size="16"></clr-icon>
            添加
          </button>
          <button type="button" class="btn btn-sm btn-secondary" [disabled]="hostSelected.length == 0 || permission==='VIEWER'"
                  (click)="openDeleteModal(hostSelected,'HOST')">
            <clr-icon shape="close"></clr-icon>
            取消授权
          </button>
        </div>
      </clr-dg-action-bar>
      <clr-dg-column>名称</clr-dg-column>
      <clr-dg-column>集群</clr-dg-column>
      <clr-dg-column>IP地址</clr-dg-column>
      <clr-dg-column>CPU(核)</clr-dg-column>
      <clr-dg-column>内存(MB)</clr-dg-column>
      <clr-dg-column>GPU(个)</clr-dg-column>
      <clr-dg-column>状态</clr-dg-column>
      <clr-dg-row *clrDgItems="let i of itemResources | itemResource  : 'HOST' " [clrDgItem]="i">
        <clr-dg-cell>{{i.data.name}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.cluster}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.ip}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.cpu_core}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.memory}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.gpu_num}}</clr-dg-cell>
        <clr-dg-cell [ngStyle]="{'color':i.data.status | statusColor }">{{i.data.status | status}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
  <div class="col-lg-12" align="center">
    <h6 class="font-title">存储</h6>
  </div>
  <div class="clr-col-lg-12">
    <clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="storageSelected">
      <clr-dg-action-bar>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-secondary" (click)="createItemResource('STORAGE')" [disabled]="permission==='VIEWER'">
            <clr-icon shape="plus" size="16"></clr-icon>
            添加
          </button>
          <button type="button" class="btn btn-sm btn-secondary" [disabled]="storageSelected.length == 0 || permission==='VIEWER'"
                  (click)="openDeleteModal(storageSelected,'STORAGE')">
            <clr-icon shape="close"></clr-icon>
            取消授权
          </button>
        </div>
      </clr-dg-action-bar>
      <clr-dg-column>名称</clr-dg-column>
      <clr-dg-column>类型</clr-dg-column>
      <clr-dg-row *clrDgItems="let i of itemResources | itemResource  : 'STORAGE' " [clrDgItem]="i">
        <clr-dg-cell>{{i.data.name}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.type}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
  <div class="col-lg-12" align="center">
    <h6 class="font-title">部署计划</h6>
  </div>
  <div class="clr-col-lg-12">
    <clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="planSelected">
      <clr-dg-action-bar>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-secondary" (click)="createItemResource('PLAN')" [disabled]="permission==='VIEWER'">
            <clr-icon shape="plus" size="16"></clr-icon>
            添加
          </button>
          <button type="button" class="btn btn-sm btn-secondary" [disabled]="planSelected.length == 0 || permission==='VIEWER'"
                  (click)="openDeleteModal(planSelected,'PLAN')">
            <clr-icon shape="close"></clr-icon>
            取消授权
          </button>
        </div>
      </clr-dg-action-bar>
      <clr-dg-column>名称</clr-dg-column>
      <clr-dg-column>部署模型</clr-dg-column>
      <clr-dg-row *clrDgItems="let i of itemResources | itemResource  : 'PLAN' " [clrDgItem]="i">
        <clr-dg-cell>{{i.data.name}}</clr-dg-cell>
        <clr-dg-cell>{{getDeployName(i.data.deploy_template)}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
  <div class="col-lg-12" align="center">
    <h6 class="font-title">备份账号</h6>
  </div>
  <div class="clr-col-lg-12">
    <clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="backupStorageSelected">
      <clr-dg-action-bar>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-secondary" (click)="createItemResource('BACKUP_STORAGE')" [disabled]="permission==='VIEWER'">
            <clr-icon shape="plus" size="16"></clr-icon>
            添加
          </button>
          <button type="button" class="btn btn-sm btn-secondary" [disabled]="backupStorageSelected.length == 0 || permission==='VIEWER'"
                  (click)="openDeleteModal(backupStorageSelected,'BACKUP_STORAGE')">
            <clr-icon shape="close"></clr-icon>
            取消授权
          </button>
        </div>
      </clr-dg-action-bar>
      <clr-dg-column>名称</clr-dg-column>
      <clr-dg-column>类型</clr-dg-column>
      <clr-dg-column>桶/容器</clr-dg-column>
      <clr-dg-row *clrDgItems="let i of itemResources | itemResource  : 'BACKUP_STORAGE' " [clrDgItem]="i">
        <clr-dg-cell>{{i.data.name}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.type}}</clr-dg-cell>
        <clr-dg-cell>{{i.data.region}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
</div>

